<template>
  <div>
    <div class="card card-custom gutter-b">
      <div class="card-header card-header-tabs-line">
        <ul
          class="nav nav-dark nav-bold nav-tabs nav-tabs-line"
          role="tablist"
          ref="builder-tab"
        >
          <li class="nav-item">
            <a
              class="nav-link active"
              v-on:click="setActiveTab"
              data-tab="0"
              data-toggle="tab"
              href="#"
              role="tab"
            >
            主页
            </a>
          </li>
          <li class="nav-item">
            <a
              class="nav-link"
              v-on:click="setActiveTab"
              data-tab="1"
              data-toggle="tab"
              href="#"
              role="tab"
            >
            头部
            </a>
          </li>
          <li class="nav-item">
            <a
              class="nav-link"
              v-on:click="setActiveTab"
              data-tab="2"
              data-toggle="tab"
              href="#"
              role="tab"
            >
            导航栏
            </a>
          </li>
          <li class="nav-item">
            <a
              class="nav-link"
              v-on:click="setActiveTab"
              data-tab="3"
              data-toggle="tab"
              href="#"
              role="tab"
            >
              内容
            </a>
          </li>
          <li class="nav-item">
            <a
              class="nav-link"
              v-on:click="setActiveTab"
              data-tab="4"
              data-toggle="tab"
              href="#"
              role="tab"
            >
              左侧菜单
            </a>
          </li>
          <li class="nav-item">
            <a
              class="nav-link"
              v-on:click="setActiveTab"
              data-tab="5"
              data-toggle="tab"
              href="#"
              role="tab"
            >
              底部
            </a>
          </li>
        </ul>
      </div>

      <!--begin::Form-->
      <form class="form" v-on:submit="submit($event)">
        <div class="card-body">
          <b-tabs class="hide-tabs" v-model="tabIndex">
            <b-tab active>
              <div class="form-group row">
                <label class="col-lg-3 col-form-label">
                  首页进度条:
                </label>
                <div class="col-lg-9 col-xl-4">
                  <select class="form-control" v-model="config.loader.type">
                    <option value="false">
                      无
                    </option>
                    <option value="spinner-logo" selected="selected">
                      <option value="spinner-logo">LOGO</option>
                    </option>
                  </select>
                </div>
              </div>
            </b-tab>

            <b-tab>
              <div class="form-group row">
                <label class="col-lg-3 col-form-label">
                  固定头:
                </label>
                <div class="col-lg-9 col-xl-4">
                  <span class="switch switch-icon">
                    <label>
                      <input type="checkbox"  v-model="config.header.self.fixed.desktop" value="true"  checked="" />
                      <span></span>
                    </label>
                  </span>
                </div>
              </div>
              <div class="form-group row">
                <label class="col-lg-3 col-form-label">
                  移动设备:
                </label>
                <div class="col-lg-9 col-xl-4">
                  <span class="switch switch-icon">
                    <label>
                      <input type="checkbox" v-model="config.header.self.fixed.mobile" value="true"  checked=""  />
                      <span></span>
                    </label>
                  </span>
                </div>
              </div>

              <div class="form-group row">
                <label class="col-lg-3 col-form-label">
                  显示标题菜单:
                </label>
                <div class="col-lg-9 col-xl-4">
                  <span class="switch switch-icon">
                    <label>
                      <input type="checkbox" v-model="config.header.menu.self.display" value="true"  checked="" />
                      <span></span>
                    </label>
                  </span>
                </div>
              </div>

              <div class="form-group row">
                <label class="col-lg-3 col-form-label">
                  标题菜单布局:
                </label>
                <div class="col-lg-9 col-xl-4">
                  <select class="form-control" v-model="config.header.menu.self.layout" >
                    <option value="default" selected="">默认</option>
                    <option value="tab">选项卡</option>
                  </select>
                </div>
              </div>

              <div class="form-group row">
                <label class="col-lg-3 col-form-label">
                  标题菜单箭头:
                </label>
                <div class="col-lg-9 col-xl-4">
                  <span class="switch switch-icon">
                    <label>
                      <input type="checkbox" v-model="config.header.menu.self['root-arrow']" value="true" />
                      <span></span>
                    </label>
                  </span>
                </div>
              </div>
            </b-tab>

            <b-tab>
              <div class="form-group row">
                <label class="col-lg-3 col-form-label">
                  显示副标题:
                </label>
                <div class="col-lg-9 col-xl-4">
                  <span class="switch switch-icon">
                    <label>
                      <input type="checkbox" v-model="config.subheader.display" value="true"  checked="" />
                      <span></span>
                    </label>
                  </span>
                </div>
              </div>
              <div class="form-group row">
                <label class="col-lg-3 col-form-label">
                  固定副标题:
                </label>
                <div class="col-lg-9 col-xl-4">
                  <span class="switch switch-icon">
                    <label>
                      <input type="checkbox"  v-model="config.subheader.fixed"  value="true"  checked=""  />
                      <span></span>
                    </label>
                  </span>
                  <div class="form-text text-muted">
                    启用固定（粘滞）子标题。要求<code>实心</code>子标题样式。
                  </div>
                </div>
              </div>
              <div class="form-group row">
                <label class="col-lg-3 col-form-label">宽度:</label>
                <div class="col-lg-9 col-xl-4">
                  <select class="form-control" v-model="config.subheader.width">
                    <option value="fluid" selected="">流体滚动</option>
                    <option value="fixed">固定</option>
                  </select>
                </div>
              </div>
              <div class="form-group row">
                <label class="col-lg-3 col-form-label">副标题样式:</label>
                <div class="col-lg-9 col-xl-4">
                  <select class="form-control" v-model="config.subheader.style">
                    <option value="transparent">透明</option>
                    <option value="solid" selected="">实体</option>
                  </select>
                </div>
              </div>
              <div class="form-group row">
                <label class="col-lg-3 col-form-label">子标题布局:</label>
                <div class="col-lg-9 col-xl-4">
                  <select class="form-control" v-model="config.subheader.layout" >
                    <option value="subheader-v1" selected="">
                      子标题
                    </option>
                  </select>
                </div>
              </div>
            </b-tab>

            <b-tab>
              <div class="form-group row">
                <label class="col-lg-3 col-form-label">宽度:</label>
                <div class="col-lg-9 col-xl-4">
                  <select class="form-control" v-model="config.content.width">
                    <option value="fluid">流体滚动</option>
                    <option value="fixed" selected="">固定</option>
                  </select>
                </div>
              </div>
            </b-tab>

            <b-tab>
              <div class="form-group row">
                <label class="col-lg-3 col-form-label">显示左侧菜单:</label>
                <div class="col-lg-9 col-xl-4">
                  <span class="switch switch-icon">
                    <label>
                      <input type="checkbox" v-model="config.aside.self.display" value="true" checked="" />
                      <span></span>
                    </label>
                  </span>
                </div>
              </div>
              <div class="form-group row">
                <label class="col-lg-3 col-form-label">固定备用布局:</label>
                <div class="col-lg-9 col-xl-4">
                  <span class="switch switch-icon">
                    <label>
                      <input type="checkbox" v-model="config.aside.self.fixed" value="true" checked=""/>
                      <span></span>
                    </label>
                  </span>
                </div>
              </div>
              <div class="form-group row">
                <label class="col-lg-3 col-form-label">最小化:</label>
                <div class="col-lg-9 col-xl-4">
                  <span class="switch switch-icon">
                    <label>
                      <input type="checkbox" v-model="config.aside.self.minimize.toggle" value="true" checked=""/>
                      <span></span>
                    </label>
                  </span>
                </div>
              </div>
              <div class="form-group row">
                <label class="col-lg-3 col-form-label">
                  默认最小化:
                </label>
                <div class="col-lg-9 col-xl-4">
                  <span class="switch switch-icon">
                    <label>
                      <input type="checkbox" v-model="config.aside.self.minimize.default" value="true" />
                      <span></span>
                    </label>
                  </span>
                </div>
              </div>
            </b-tab>

            <b-tab>
              <div class="form-group row">
                <label class="col-lg-3 col-form-label">固定页脚:</label>
                <div class="col-lg-9 col-xl-4">
                  <span class="switch switch-icon">
                    <label>
                      <input type="checkbox" v-model="config.footer.fixed" value="true" />
                      <span></span>
                    </label>
                  </span>
                </div>
              </div>
              <div class="form-group row">
                <label class="col-lg-3 col-form-label">宽度:</label>
                <div class="col-lg-9 col-xl-4">
                  <select class="form-control" v-model="config.footer.width">
                    <option value="fluid" selected="">流体滚动</option>
                    <option value="fixed">固定</option>
                  </select>
                </div>
              </div>
            </b-tab>
          </b-tabs>
        </div>

        <div class="card-footer">
          <div class="row">
            <div class="col-lg-3"></div>
            <div class="col-lg-9">
              <button type="submit" class="btn btn-primary font-weight-bold">
                <i class="icon-xl fas fa-save"></i>
                保存
              </button>
              &nbsp;
              <button
                v-on:click="reset($event)"
                class="btn btn-clean font-weight-bold"
              >
                <i class="la la-recycle"></i>
                还原
              </button>
            </div>
          </div>
        </div>
      </form>
      <!--end::Form-->
    </div>

    <div class="card card-custom gutter-b" hidden>
      <div class="card-header">
        <div class="card-title">
          <h3 class="card-label">Generated Config</h3>
        </div>
      </div>
      <div class="card-body">
        <!--begin::Example-->
        <div class="example mb-10">
          <p>
            Use for layout config in
            <code>/src/core/config/layout.config.json</code>
          </p>
          <div class="example-code">
            <div class="example-code">
              <span
                class="example-copy"
                v-b-tooltip.hover.top="'Copy code'"
              ></span>
              <div class="example-highlight">
                <highlight-code lang="json" class="language-json">
                  {{ config }}
                </highlight-code>
              </div>
            </div>
          </div>
        </div>
        <!--end::Example-->
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { SET_BREADCRUMB } from "@/store/breadcrumbs.module";

export default {
  name: "builder",
  components: {},
  data() {
    return {
      tabIndex: 0
    };
  },
  computed: {
    ...mapGetters(["layoutConfig"]),

    config() {
      return this.layoutConfig();
    }
  },
  mounted() {
    // set the tab from previous
    this.setActivePreviousTab();

    this.$store.dispatch(SET_BREADCRUMB, [{ title: "设置主题" }]);

    this.$nextTick(() => {
      const hljs = this.$el.querySelectorAll(".hljs");
      hljs.forEach(hl => {
        hl.classList.remove("hljs");
        hl.classList.add(`language-${hl.classList[1]}`);
      });
    });
  },
  destroyed() {
    localStorage.removeItem("builderTab");
  },
  methods: {
    /**
     * Reset config
     */
    reset(event) {
      event.preventDefault();
      // remove existing saved config
      localStorage.removeItem("config");
      window.location.reload();
    },

    /**
     * Set previous tab active
     */
    setActivePreviousTab() {
      this.tabIndex = parseInt(localStorage.getItem("builderTab")) || 0;
      const links = this.$refs["builder-tab"].querySelectorAll(".nav-link");
      // remove active tab links
      for (let i = 0; i < links.length; i++) {
        links[i].classList.remove("active");
      }
      this.$refs["builder-tab"]
        .querySelector(`[data-tab="${this.tabIndex}"]`)
        .classList.add("active");
    },
    /**
     * Set current active on click
     * @param event
     */
    setActiveTab(event) {
      const tab = event.target.closest('[role="tablist"]');
      const links = tab.querySelectorAll(".nav-link");
      // remove active tab links
      for (let i = 0; i < links.length; i++) {
        links[i].classList.remove("active");
      }

      // set clicked tab index to bootstrap tab
      this.tabIndex = parseInt(event.target.getAttribute("data-tab"));

      // set current active tab
      event.target.classList.add("active");

      // keep active tab
      localStorage.setItem("builderTab", this.tabIndex);
    },

    /**
     * Submit form
     * @param event
     */
    submit(event) {
      event.preventDefault();
      // save new config to localStorage
      localStorage.setItem("config", JSON.stringify(this.config));
      window.location.reload();
    }
  }
};
</script>
